<template>
    <div class="caseInfo">
        <div class="showBox">
            <div class="close" @click="hideCaseInfo">
                <span class="iconfont icon-guanbi"></span>
            </div>
            <div class="content">
                <div class="tabs">
                    <template v-for="(item, index) in tabsList">
                        <h3 :key="index" :class="tabsActive === index ? 'active' : ''" @click="tabsChange(index)">{{ item }}</h3>
                    </template>
                </div>
                <div class="tbody">
                    <table v-if="tabsActive === 0">
                        <tr>
                            <td width="100">案件编号</td>
                            <td>{{ caseInfo.b1.t1 }}</td>
                        </tr>
                        <tr>
                            <td width="100">案件来源</td>
                            <td>{{ caseInfo.b1.t2 }}</td>
                        </tr>
                        <tr>
                            <td>案件类型</td>
                            <td>{{ caseInfo.b1.t3 }}</td>
                        </tr>
                        <tr>
                            <td>执法主体</td>
                            <td>{{ caseInfo.b1.t4 }}</td>
                        </tr>
                        <tr>
                            <td>执法人员</td>
                            <td>{{ caseInfo.b1.t5 }}</td>
                        </tr>
                        <tr>
                            <td>执法地点</td>
                            <td>{{ caseInfo.b1.t6 }}</td>
                        </tr>
                        <tr>
                            <td>案件类别</td>
                            <td>{{ caseInfo.b1.t7 }}</td>
                        </tr>
                        <tr>
                            <td>是否立案</td>
                            <td>{{ caseInfo.b1.t8 }}</td>
                        </tr>
                        <tr>
                            <td>是否派发</td>
                            <td>{{ caseInfo.b1.t9 }}</td>
                        </tr>
                        <tr>
                            <td>案由</td>
                            <td>{{ caseInfo.b1.t10 }}</td>
                        </tr>
                        <tr>
                            <td>案件描述</td>
                            <td>{{ caseInfo.b1.t11 }}</td>
                        </tr>
                    </table>
                    <table v-if="tabsActive === 1">
                        <tr>
                            <td width="100">当事人类型</td>
                            <td>{{ caseInfo.b2.t1 }}</td>
                        </tr>
                        <tr>
                            <td width="100">当事人姓名</td>
                            <td>{{ caseInfo.b2.t2 }}</td>
                        </tr>
                        <tr>
                            <td width="100">证件类型</td>
                            <td>{{ caseInfo.b2.t3 }}</td>
                        </tr>
                        <tr>
                            <td width="100">证件号</td>
                            <td>{{ caseInfo.b2.t4 }}</td>
                        </tr>
                        <tr>
                            <td width="100">联系电话</td>
                            <td>{{ caseInfo.b2.t5 }}</td>
                        </tr>
                        <tr>
                            <td width="100">联系地址</td>
                            <td>{{ caseInfo.b2.t6 }}</td>
                        </tr>
                        <tr>
                            <td width="100">派发人员</td>
                            <td>{{ caseInfo.b2.t7 }}</td>
                        </tr>
                        <tr>
                            <td width="100"></td>
                            <td></td>
                        </tr>
                    </table>
                    <template v-if="tabsActive === 2">
                        <table>
                            <tr>
                                <td width="100">调查取证</td>
                                <td>{{ caseInfo.b3.t1 }}</td>
                            </tr>
                            <tr>
                                <td width="100">违法事实</td>
                                <td>{{ caseInfo.b3.t2 }}</td>
                            </tr>
                            <tr>
                                <td width="100">违法依据</td>
                                <td>{{ caseInfo.b3.t3 }}</td>
                            </tr>
                            <tr>
                                <td width="100">取证时间</td>
                                <td>{{ caseInfo.b3.t4 }}</td>
                            </tr>
                            <tr>
                                <td width="100">取证地点</td>
                                <td>{{ caseInfo.b3.t5 }}</td>
                            </tr>
                            <tr>
                                <td width="100">描述</td>
                                <td>{{ caseInfo.b3.t6 }}</td>
                            </tr>
                        </table>
                        <div class="picList">
                            <div class="listTitle">调查取证：</div>
                            <div class="listCont">
                                <template v-for="(item, index) in caseInfo.b3.list">
                                    <div class="item" :key="index" @click="openPicSlide(index)">
                                        <img :src="item.img" alt="">
                                    </div>
                                </template>
                            </div>
                        </div>
                    </template>
                    <table v-if="tabsActive === 3">
                        <tr>
                            <td width="100">违法事实</td>
                            <td>{{ caseInfo.b4.t1 }}</td>
                        </tr>
                        <tr>
                            <td width="100">违法依据</td>
                            <td>{{ caseInfo.b4.t2 }}</td>
                        </tr>
                        <tr>
                            <td width="100">处罚依据</td>
                            <td>{{ caseInfo.b4.t3 }}</td>
                        </tr>
                        <tr>
                            <td width="100">处罚内容</td>
                            <td>{{ caseInfo.b4.t4 }}</td>
                        </tr>
                        <tr>
                            <td width="100">处罚告知时间</td>
                            <td>{{ caseInfo.b4.t5 }}</td>
                        </tr>
                    </table>
                    <table v-if="tabsActive === 4">
                        <tr>
                            <td width="100">决定类别</td>
                            <td>{{ caseInfo.b5.t1 }}</td>
                        </tr>
                        <tr>
                            <td width="100">处罚决定种类</td>
                            <td>{{ caseInfo.b5.t2 }}</td>
                        </tr>
                        <tr>
                            <td width="100">处罚内容</td>
                            <td>{{ caseInfo.b5.t3 }}</td>
                        </tr>
                        <tr>
                            <td width="100">决定日期</td>
                            <td>{{ caseInfo.b5.t4 }}</td>
                        </tr>
                        <tr>
                            <td width="100">决定文书号</td>
                            <td>{{ caseInfo.b5.t5 }}</td>
                        </tr>
                        <tr>
                            <td width="100">决定书</td>
                            <td>{{ caseInfo.b5.t6 }}</td>
                        </tr>
                        <tr>
                            <td width="100">送达方式</td>
                            <td>{{ caseInfo.b5.t7 }}</td>
                        </tr>
                        <tr>
                            <td width="100">送达日期</td>
                            <td>{{ caseInfo.b5.t8 }}</td>
                        </tr>
                        <tr>
                            <td width="100">送达回证</td>
                            <td>{{ caseInfo.b5.t9 }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CaseInfo',
    props: ['caseInfo'],
    data () {
        return {
            tabsActive: 0,
            tabsList: ['案件基础信息', '当事人信息', '调查取证', '处罚告知', '处罚决定']
        }
    },
    mounted () {

    },
    methods: {
        openPicSlide: function (index) {
            this.$emit('openPicShow', index)
        },
        tabsChange: function (index) {
            this.tabsActive = index
        },
        hideCaseInfo: function () {
            this.$emit('close')
        }
    }
}
</script>

<style lang="less" scoped>
.caseInfo {
    width: 62rem; height: 100%; background: url("../static/img/bigData/wallpaper.jpg"); position: absolute; z-index: 999; right: 0; box-sizing: border-box; padding: 2rem 3rem; padding-top: 10rem; box-shadow: -1.5rem 0 3rem rgba(0,0,0,0.3); opacity: 0.95;
}
.close {
    position: absolute; left: 1rem; top: 0; width: 5rem; height: 5rem; overflow: hidden; cursor: pointer; transition: all .3s; display: flex; align-items: center; justify-content: center;
    span{
        color: #66C6FF; font-size: 2.4rem;
    }
    &:hover {
        transform: rotate(180deg);
    }
}
.content {
    width: 100%; height: 100%;
}
.tabs {
    display: flex;
    h3 {
        border: .1rem transparent solid; color: #66C6FF; font-size: 1.6rem; margin-right: 1.5rem; padding: .5rem 1rem;
        cursor: pointer; opacity: 0.7;
        &.active {
            opacity: 1; border-color: #66C6FF; font-weight: bold;
        }
    }
}
@borderColor: rgba(100, 200, 255, .3);
table {
    border-right: .1rem @borderColor solid; border-bottom: .1rem @borderColor solid; margin-top: 2rem; width: 100%;
    tr {
        td {
            border-top: .1rem @borderColor solid; border-left: .1rem @borderColor solid; color: #66C6FF; font-size: 1.6rem; height: 4rem; padding: 0 1rem; line-height: 4rem;
        }
    }
}

.picList {
    margin-top: 2rem;
    .listTitle {
        font-size: 1.6rem; color: #66C6FF;
    }
    .listCont {
        display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 2rem; margin-top: 2rem;
        .item {
            align-self: center; cursor: pointer;
            img {
                width: 100%;
            }
        }
    }

}
</style>
